<template>


  <el-form :model="form" label-width="auto" style="max-width: 600px" :inline="true">
    <el-form-item label="请选择常数类别">
      <el-select
          @Change="typeChange"
          v-model="selectType"
          placeholder="请选择常数类别..."
          size="large"
          style="width: 240px"
      >
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.constanttypename"
            :value="item.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type=" primary" @click="toAdd">添加</el-button>
    </el-form-item>

  </el-form>


  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="constanttypeid" label="常数类别ID" width="180"/>
      <el-table-column prop="constantcode" label="常数项编码" width="180"/>
      <el-table-column prop="constantname" label="常数项名称" width="180"/>
      <el-table-column label="操作">
        <template #default="solt">
          <el-button link type="primary" size="small" @click="toEdit(solt)"> 编辑 :{{ solt.row.id }}</el-button>
          <el-button link type="primary" size="small" @click="removeById(solt.row.id)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
  </div>

  <!-- 添加表单 dialogFormVisible 表示是否显示，  boolean   -->
  <el-dialog v-model="editDialogFormVisible" title="添加常数项" width="500">
    <el-form :model="editForm" label-width="auto">
      <el-form-item label="常数类别ID">
        <el-input v-model="editForm.constanttypeid"/>
      </el-form-item>
      <el-form-item label="常数项编码">
        <el-input v-model="editForm.constantcode"/>
      </el-form-item>
      <el-form-item label="常数项名称">
        <el-input v-model="editForm.constantname"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>


  </el-dialog>


</template>


<script setup>
import {onMounted, onUnmounted, ref} from 'vue'
import {ElNotification} from 'element-plus'
import axios from 'axios';
import {ElMessage, ElMessageBox} from 'element-plus'

import service from '@/utils/request'

let selectType = ref('')//常数类别列表用户选择的typeid
let options = ref([])//常数类别列表

//是否显示 dialog
let editDialogFormVisible = ref(false);

//用于接收表单内容的
let form = ref({})


// 修改表单
let editForm = ref({
  constanttypeid : '',
  constantcode : '',
  constantname : ''
})


//提交数据 到
function onSubmit() {
  console.log("form", form.value);

}

//表格的数据
let tableData = ref([])

function toAdd() {
  editDialogFormVisible.value = true;
}

function typeChange(value) {
  service.post("/constantitem/getbytypeid", {id: value}).then(
      res => {
        tableData.value = res.data
      }
  )
  console.log(value)//用于控制台调试
}

function save() {
  //1 获取添加的表单信息

  console.log("editForm.value: ", editForm.value);

  service.post('/constantitem/saveOrUpdate', editForm.value).then(
      res => {
        console.log("data", res.data);
        // 3  判断 请求结果，成功与否
        editDialogFormVisible.value = false;

        if (res.data) {
          // 给与用户反馈
          ElNotification({
            title: '提示',
            message: '保存成功!!!!!!!!!!!!!',
            type: 'success',
          })
          listData();
        } else {
          // 给与用户反馈
          ElNotification({
            title: '提示',
            message: '保存失败!!!!!!!!!!!!!',
            type: 'error',
          })
        }
      })

  //2 发送网络请求 到后端，


}

function listData() {
  service.get("/constantitem/list").then(
      res => {
        tableData.value = res.data;
      })
}

//待编辑
function toEdit({row}) {

  const id = row.id
  service.get('/constantitem/getById/' + id).then(({status, data}) => {
    //根据用户id ，查询当前待修改的数据
    console.log(data)
    editForm.value.id = data.id
    editForm.value.constanttypeid = data.constanttypeid
    editForm.value.constantcode = data.constantcode
    editForm.value.constantname=data.constantname
    editDialogFormVisible.value = true;
  })


}


function removeById(id) {

  //确认是否删除
  ElMessageBox.confirm('是否确认删除?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {


        service.get('/constantitem/deleteById/' + id).then(({status, data}) => {
          if (data) {
            // 给与用户反馈
            ElNotification({
              title: '提示',
              message: '删除成功!!!!!!!!!!!!!',
              type: 'success',
            })
            //查询最新的数据
            listData();
          } else {
            // 给与用户反馈
            ElNotification({
              title: '提示',
              message: '删除失败',
              type: 'error',
            })
          }
        })
      })


}

onMounted(() => {
  //加载常数项
  listData();

//加载常数类别，提供给用户选择（下拉列别）
  service.get("/constanttype/list").then(
      res => {
        options.value = res.data
        selectType.value = 1;
      }
  )
})

</script>